<!DOCTYPE html>
<html>

<head>
    <title>XKNX config</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.css">
    <link rel="stylesheet" href="lib/codemirror/codemirror.css">
    <link rel="stylesheet" href="styles/converter.css">

    <script src="lib/codemirror/codemirror.js"></script>
    <script src="lib/codemirror/mode/yaml/yaml.js"></script>
    <script src="lib/js-yaml/js-yaml.min.js"></script>
    <!-- <script src="lib/js-yaml/js-yaml.js"></script> -->
    <script src="lib/converter.js"></script>

</head>

<body>

    <div class="header">
        <h1 class='child inline-block-child'>XKNX config converter.</h1>
        <a class='child inline-block-child' href="../config_converter.html">back to xknx.io</a>
    </div>
    <div class="content">
        <div class="src">
            <h4 class="subheader">Insert xknx.yaml config here here:</h4>
            <textarea id="source">
# Please note that comments can not be preserved.
</textarea>
        </div>
        <div class="dst">
            <h4 class="subheader">
                <a href="https://www.home-assistant.io/integrations/knx/" target="_blank" rel="noopener noreferrer">
                    Home-Assistant configuration.yaml style</a> knx config:
            </h4>
            <textarea id="result">
# Converted yaml or parsing errors will appear here.
# Warnings about invalid configuration will be shown in the textarea below source.
</textarea>
        </div>
    </div>

    <div class="control">
        <div class="info">
            <textarea id="info_text"></textarea>
        </div>
        <div class="options">
            <div>
                <input type="checkbox" id="wrap_knx" name="wrap_knx" checked>
                <label for="wrap_knx">Wrap in `knx: ` tag</label>
            </div>
            <div>
                <input type="checkbox" id="sort_keys" name="sort_keys">
                <label for="sort_keys">Sort keys alphabetically</label>
            </div>
        </div>
    </div>

</body>

</html>